<template>
  <div class="suggestion nav">
    <van-nav-bar title="申诉" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="b_line ml-30 mr-30"></div>
    <textarea placeholder="申诉描述" v-model="info.content"></textarea>
    <p class="ml-30 mr-30 txt">上传凭证</p>
    <div class="pic ml-30 addPic flex flex-wrap">
      <img v-for="(item,index) in info.images" :key="index" :src="item" />
      <td-upload @upload-img="headPortrait"></td-upload>
    </div>
    <van-button class="mt-30 ml-30 mr-30" type="primary" size="large" @click='sure'>提交</van-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
       info: {
        images: [],
        evaluateId:this.$route.query.evaluateId
      },
    }
  },
  methods:{
    headPortrait(e) {
      this.info.images.push(e);
    },
    sure(){
      if (!this.info.content) {
        this.$toast.fail("请先输入描述");
        return;
      }
      this.$post(this.$api.user.appeal, this.info).then(data => {
        this.$toast.success("申诉成功，请等待审核");
        this.$router.history.go(-1);
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .forms{background-color: #fff;}
  .forms .name{width: 1rem;height: 0.6rem;border-radius: 0.29rem;font: 0.28rem/0.6rem '微软雅黑';text-align: center;background-color: #F5F5F5;margin-right: 0.3rem;}
  .forms input[type=text]{border: none;outline: none;color: #CCCCCC;font: 0.3rem/0.9rem '微软雅黑';display: block;text-indent: 0.1rem;width: 100%;}
  .leftLine{position: relative;}
  .leftLine::before{content: '';width: 0.04rem;height: 0.4rem;background-color: #4AACE9;position: absolute;left: 0.3rem;top: 0.65rem;}
  textarea{font: 0.3rem/0.4rem '微软雅黑';color: #CCCCCC;border: none;outline: none;height: 2rem;padding: 0.43rem;width:calc(100vw - 0.86rem);display:block;}
  .pic{background-color: #fff;}
  .addPic {
    /* height: 1.8rem; */
  }
  .addPic img {
    width: calc((100vw - 0.6rem - 0.2rem)/3);
    height: calc((100vw - 0.6rem - 0.2rem)/3);
    display: inline-block;
    /* margin-right: 0.2rem; */
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .addPic img:nth-of-type(3n){
    margin-right: 0;
  }
  input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-moz-placeholder,textarea::-webkit-input-placeholder { /* Mozilla Firefox 19+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-ms-input-placeholder,textarea::-webkit-input-placeholder { /* Internet Explorer 10+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }   
  .txt{font-size:0.32rem;line-height: 0.92rem;color: #ccc;}
</style>
